<template>
<div class="detective-group-edit">

  <el-form class="edit-form" :inline="true" :model="baseInfo" :rules="rules" label-position="top">
    <el-form-item class="edit-form-item xdh-validate--right-inside" label="上级组织" prop="superior">
      <el-select size="mini" v-model="baseInfo.superior" placeholder="上级组织">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item class="edit-form-item xdh-validate--right-inside" label="责任单位" prop="department">
      <el-select size="mini" v-model="baseInfo.department" placeholder="责任单位">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item class="edit-form-item xdh-validate--right-inside" label="小组名称" prop="groupName">
      <el-input size="mini" v-model="baseInfo.groupName" placeholder="小组名称"></el-input>
    </el-form-item>
    <el-form-item class="edit-form-item xdh-validate--right-inside" label="小组类型" prop="groupType">
      <el-select size="mini" v-model="baseInfo.groupType" placeholder="小组类型">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item class="edit-form-item" style="width: 98%" label="小组职责">
      <el-input type="textarea" size="mini" v-model="baseInfo.groupDesc" placeholder=""
        :rows="3" resize="none"
      ></el-input>
    </el-form-item>
    <el-form-item class="edit-form-item" style="width: 98%; margin-top:10px;border-bottom: 1px solid #c0c4cc;" label="小组成员"> 
    </el-form-item>
  </el-form>

  <div class="member-select">
    <div class="members table-wrap">
      <el-form  :inline="true" :model="memberFilter">
        <el-form-item  label="姓名" >
          <el-input size="mini" v-model="memberFilter.name"  placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="证件号码">
          <el-input size="mini" v-model="memberFilter.id"  placeholder="证件号码"></el-input>
        </el-form-item>
      </el-form>
      <div class="table">
        <el-table :data="realMembers" height="100%" border size="mini" 
          style="width: 100%"
          @selection-change="membersCheckedHandler"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column v-for="(col, index) in memberColumns" :key="index" :prop="col.prop" :label="col.label" :show-overflow-tooltip="true">
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="switch">
      <el-button size="mini" type="primary" style="margin-bottom: 10px;" @click="addToSelected">添加》</el-button>
      <el-button size="mini" type="danger" style="margin: 0px;" @click="removeFromSelected">《移除</el-button>
    </div>

    <div class="selected table-wrap">
      <el-form  :inline="true" :model="selectedFilter">
        <el-form-item  label="姓名" >
          <el-input size="mini" v-model="selectedFilter.name"  placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="证件号码">
          <el-input size="mini" v-model="selectedFilter.id"  placeholder="证件号码"></el-input>
        </el-form-item>
      </el-form>
      <div class="table">
        <el-table :data="realSelected" height="100%" border size="mini" 
          style="width: 100%"
          @selection-change="selectedCheckedHandler"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column v-for="(col, index) in memberColumns" :key="index" :prop="col.prop" :label="col.label" :show-overflow-tooltip="true">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>

  <div class="authority-wrap">
    <div class="auth-item" v-for="(item, key) in authList" :key="key">
      <p>{{item.label}}</p>
      <el-switch
        v-model="item.value"
        active-color="#13ce66"
        inactive-color="#ff4949">
      </el-switch>
    </div>
  </div>

</div>
</template>

<style lang="scss" scoped>
.detective-group-edit{
  height: 100%;
  overflow: auto;
  .edit-form{
    &-item{
      width: 48%;
      margin: 0 8px;
        
      /deep/ .el-form-item__label{
        line-height: 1.4;
        padding: 0;
      }
      /deep/ .el-select{
        width: 100%;
      }
    }
  }
  .member-select{
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    height: 350px;
    .table-wrap{
      flex: 1;
      display: flex;
      height: 100%;
      flex-flow: column;
      align-items: center;
      /deep/ .el-form-item{
        margin-bottom: 5px;
      }
      &>.table{
        flex: 1;
        width: 99%;
      }
    }
    .switch{
      flex: 0 0 auto;
      display: flex;
      flex-flow: column;
      margin: 0 10px;
    }
  }
  .authority-wrap{
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    width: 100%;
    margin-top: 34px;
    .auth-item{
      flex: 0 0 12.5%;
      padding: 10px;
      text-align: center;
      >p{
        margin:0; 
        padding: 0;
        text-align:left;
      }
    }
    
  }
  .authority-wrap::after{
    content: '权限';
    position: absolute; 
    left: 5px;
    right: 10px;
    top: -18px;
    border-bottom: 1px solid #c0c4cc;
  }
}
</style>

<script>
export default {
  components: {
  },
  data() {
    return {
      baseInfo: {
        superior: '',
        department: '',
        groupName: '',
        groupType: '',
        groupDesc: ''
      },
      rules: {
        superior: [{ required: true, message: '请选择活动名称', trigger: 'change' }],
        department: [{ required: true, message: '请选择单位', trigger: 'change' }],
        groupName: [{ required: true, message: '请填写小组名称', trigger: 'blur' }],
        groupType: [{ required: true, message: '请选择小组类型', trigger: 'change' }]
      },
      // --------
      memberColumns: [{prop: 'name', label: '姓名'}, {prop: 'id', label: '证件号码'}, {prop: 'department', label: '所属单位'}, {prop: 'typeName', label: '角色'}],
      memberFilter: {name: '', id: ''},
      selectedFilter: {name: '', id: ''},
      members: [
        {name: '陈李1', id: '000011', department: '飞虎队a', typeName: '队长', type: 'leader'},
        {name: '陈李2', id: '000012', department: '飞虎队b', typeName: '副队长', type: 'viceLeader'},
        {name: '陈李3', id: '000013', department: '飞虎队c', typeName: '联络员', type: 'connector'},
        {name: '陈李4', id: '000014', department: '飞虎队d', typeName: '普通组员', type: 'teammate'},
        {name: '陈李5', id: '000015', department: '飞虎队e', typeName: '普通组员', type: 'teammate'},
        {name: '陈李6', id: '000016', department: '飞虎队f', typeName: '普通组员', type: 'teammate'}
      ],
      selected: [],
      memberChecked: [], // 成员checkbox选中
      selectChecked: [], // 已选checkbox选中
      // ------------
      authList: [
        {name: 'access', label: '访问权限', value: false},
        {name: 'dilivery', label: '指派权限', value: false},
        {name: 'edit', label: '编辑权限', value: false},
        {name: 'arrest', label: '拘捕权限', value: false},
        {name: 'release', label: '释放权限', value: false},
        {name: 'judge', label: '判决权限', value: false}
      ]
    }
  },
  computed: {
    realMembers() {
      let name = this.memberFilter.name
      let id = this.memberFilter.id
       if (!name && !id) {
        return this.members
      } else {
        return this.members.filter((item, index) => {
          return item.name === name || item.id === id
        })
      }
    },
    realSelected() {
      let arr = []
      let name = this.selectedFilter.name
      let id = this.selectedFilter.id
      if (!name && !id) {
        arr = this.selected
      } else {
        arr = this.selected.filter((item, index) => { 
          return item.name === name || item.id === id
        })
      }
      arr.map((item, index) => {
        if (index === 0) {
          item.type = 'leader'
          item.typeName = '队长'
        } else if (index === 1) {
          item.type = 'viceLeader'
          item.typeName = '副队长'
        } else if (index === 2) {
          item.type = 'connector'
          item.typeName = '联络员'
        } else {
          item.type = 'teammate'
          item.typeName = '普通组员'
        }
      })
      return arr
      
    }
  },
  methods: {
    membersCheckedHandler(val) {
      this.memberChecked = val
    },
    selectedCheckedHandler(val) {
      this.selectChecked = val
    },
    addToSelected() {
      if (!this.memberChecked.length) return
      this.members = this._removeItems(this.members, this.memberChecked)
      this.selected = this.selected.concat(this.memberChecked)
      this.selectedFilter = {name: '', id: ''} // 清除 member的筛选
    },
    removeFromSelected() {
      if (!this.selectChecked.length) return
      this.selected = this._removeItems(this.selected, this.selectChecked)
      this.members = this.members.concat(this.selectChecked)
      this.memberFilter = {name: '', id: ''} // 清除 selected 的筛选
    },
    _removeItems(fromArr, transArr) {
      return fromArr.reduce((total, item, index) => {
        let current = item
        let targetIndex = transArr.findIndex((i) => {
          return i.id === current.id
        })
        if (targetIndex === -1) {
          total.push(current)
        }
        return total
      }, [])
    }
  },
  created() {
  },
  mounted() {
  }
}
</script>

